<template>
    <page-view>
        <div class="w-full h-[600px] bg-backgroundColor flex items-center justify-center">
            <div>
                <h1 class="xxx font-bold text-red-500 text-xl">订单详情</h1>
                <div class="w-[800px] h-[500px] border-2">
                    <h2 class="font-bold text-black">您的订单号为:{{ orderInfo.orderId }}</h2>

                    <h2 class="font-bold text-black">您的商品信息为:</h2>
                    <ul>
                        <el-scrollbar height="300px">
                            <li class="flex" v-for="shopcart in orderInfo.shopCarts" :key="shopcart">
                                <div class="demo-image__preview w-[100px] h-[100px]">
                                    <el-image style="width: 100px; height: 100px" :src="shopcart.good.pic" :zoom-rate="1.2"
                                        :preview-src-list="shopcart.good.picList" :initial-index="4" fit="cover" />
                                </div>
                                <p class="ml-[10px]">{{ shopcart.good.goodName }}
                                <p>数量:{{ shopcart.commodityNumber }}</p>
                                <p>单价:{{ shopcart.commodityPrice }}</p>
                                </p>
                            </li>
                        </el-scrollbar>
                    </ul>
                    <div class="ml-[200px] flex">
                        <p>下单用户:</p>
                        <div class="w-[100px] h-[30px] text-center">{{
                            orderInfo.orderUser
                        }}
                        </div>
                        <p>电话号码：{{ orderInfo.orderPhone }}&nbsp;</p>
                        <p>下单时间：{{ orderInfo.orderPurchaseTime }}</p>
                    </div>
                    <div>
                        <p class="ml-[200px] text-red-400">订单状态：{{ orderInfo.orderStatus === '0' ? "未支付" : "已支付" }}</p>
                    </div>
                    <h2 class="font-bold text-red-500">待支付金额:{{ orderInfo.orderMoney }}￥</h2>
                    <div class="flex">
                        <p class="mt-[40px]">选择支付方式:</p>
                        <a class="mt-[40px] ml-[10px]" @click="onclick"><img style="width: 30px;height:30px"
                                src="../../assets/img/支付宝支付.png" alt=""></a>
                    </div>

                </div>
            </div>
        </div>
    </page-view>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive } from 'vue'
import API from "../../utils/API";
import { result } from "lodash";
const router = useRouter();
const route = useRoute();
let orderInfo = {}
const receiveParam = () => {
    orderInfo = JSON.parse(route.query.OrderInfoString)
    orderInfo = orderInfo._value
    console.log(orderInfo)
}
receiveParam()

const onclick = () => {
    API.Shopcart.payOrder(orderInfo.orderId).then(result => {
        let zhifubao = JSON.parse(result);
        document.write(zhifubao)

    })
}
</script>
<style lang="scss" scoped></style>